<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        h3 {
            color: red;
        }

        i {
            color: #c7c7c7;
        }

    </style>
    <script src="vue.js"></script>
</head>

<body>
    
    <div id="app">

        <h3>v-for的使用</h3>

        <ul>
            <li v-for="(city, index) in citys">
                {{index+1}}. {{city}}
            </li>
        </ul>

        <h2 v-for="(vegetable, index) in vegetables" v-bind:title="vegetable.name">
            蔬菜名称：{{vegetable.name}} 蔬菜编号：{{vegetable.id}}
        </h2>

        <br>

        <h3>v-model的使用</h3>

        <!-- v-model 数据双向绑定 改变任意位置的值另一位置也会随之改变 -->
        <p style="color: blue;font-size: 13px;">v-model的作用是便捷设置和获取表单元素中的值</p>
        <input type="text" v-model="message">&nbsp;<i>尝试改变文本框中的值</i>
        <h2>{{ message }}</h2>

        <br>

        <h3>v-on补充</h3>

        <h5>传参</h5>
        <input type="button" value ="按钮" @click="DoIt('cpu: i5-10400f', 1099)">

        <h5>修饰符</h5>
        <input type="text" @keyup.enter="sayHi">&nbsp;<i>官网可查询详细的修饰符</i>

    </div>

    <script>

        var vue = new Vue({
            el: "#app",
            data: {
                citys: ["北京", "上海", "广州", "深圳"],
                vegetables: [
                    {name: "西红柿", id: "001"},
                    {name: "西兰花", id: "002"},
                    {name: "上海青", id: "003"}
                ],
                message: "学习Vue"
            },
            methods: {
                DoIt: function(parm1, parm2) {
                    alert(`${parm1}商品的价格为￥${parm2}`);
                },
                sayHi: function(e) {
                    alert(`你按下了${e.key}键`);
                }
            }
        });

    </script>

</body>
</html>